<template>
	<gzPageWrapper ref="gzPageWrapperRef"
		:styles="activeBgPic"
		:nav="{ title: '权益中心', color: vdata.textColor,fontWeight:800}"
		:up="{ use: true, auto: false, page: { num: 1, size: 10 }, textNoMore: '--暂无更多--', empty: { use: false } }"
		:down="{ use: true, auto: false }" @upCallback="upCallback" @downCallback="downCallback">
		<template #default>
			<view class="inner" style="padding: 0 0  0 32rpx;">
				<view class="topName">
					<view class="left" :style="{color:vdata.memberName}">{{vdata.isLogin ? vdata.fansInfo.quarterInSearch ==1 ? '实名会员': vdata.fansInfo.quarterAssetLevel=="1"?'实名会员':vdata.fansInfo.quarterAssetLevel=="2"?'金桂会员':vdata.fansInfo.quarterAssetLevel=="3"?'富嘉会员':vdata.fansInfo.quarterAssetLevel=="4"?'钻石会员':vdata.fansInfo.quarterAssetLevel=="5"?'鼎福会员':'未实名会员' :'未实名会员'}}</view>
					<view class="right" :style="{background:vdata.memberVip}">vip</view>
				</view>
				<view class="center" :style="{color:vdata.memberTime}" >
					<span v-if="vdata.fansInfo.quarterInSearch ==1">{{vdata.isLogin ?'您的上个季度资产等级正在汇算中':''}}</span>
					 <span v-else>{{vdata.fansInfo.year}}年第{{vdata.fansInfo.quarter ==1 ?'一':vdata.fansInfo.quarter ==2?'二':vdata.fansInfo.quarter ==3?'三':'四'}}季度</span>
				</view>
				<view class="bottom" >
					<view class="text" :style="{color:vdata.memberScore}">
						{{vdata.isLogin ? '我的福分' :''}}
					</view>
					<view class="num" :style="{color:vdata.memberScore}">
						{{vdata.isLogin ?vdata.totalScore :''}}
					</view>
				</view>
				<view class="crown">
					<image :src="vdata.crownBg" mode="aspectFill"></image>
				</view>
				<view class="rightB">
					<view class="levelRecord" :style="{background:vdata.lRecord,color:vdata.rightColor}" @click="levelRecord">等级记录</view>
					<!-- <view class="equityDetail" :style="{background:vdata.eDetail,color:vdata.rightColor}" @click="equityDetail">权益明细</view>
					<view class="equityRule" :style="{background:vdata.eRule,color:vdata.rightColor}" @click="equityRule">权益规则</view> -->
				</view>
			</view>
			<view class="content">

				<!-- <uni-segmented-control class="uni-tab" :current="vdata.tabCurrent" :values="items" @clickItem="onClickTabItem" styleType="text" activeColor="#00A952"></uni-segmented-control> -->
				<scroll-view scroll-x="true" show-scrollbar="false">
					<view class="tabContainer">
						<view class="tab-container">
						  <view v-for="(tab, index) in vdata.tabItems" :key="index" @click="changeTab(tab,index)" :class="{ 'selected': vdata.tabCurrent === index }" class="tab-item">
						    <view class="itemClass">{{ tab.content }}</view>
						    <view v-if="vdata.tabCurrent === index" class="underline"></view>
						  </view>
						</view>
					</view>
				</scroll-view>
				
				<view class="list">
					<view class="item" v-for="item in vdata.equityList" :key="item.awardId">
						<view class="img">
							<image v-if="item.awardType != 0" :src="item.imgUrl" mode="aspectFill"></image>
							<image v-if="item.awardType==0" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/e1e7dcec-bf89-4db9-8226-dc99d67f1c89.png" mode="aspectFill"></image>
						</view>
						<view class="rightCon">
							<view class="leftText">
								<view class="topText">
									{{item.name}}
								</view>
								<view class="expendScore">
									消耗：{{item.scoreNeed}}福分
								</view>
								<view class="exchangeNum">
									还可兑换：{{item.residueTimes==null ? 0 :item.residueTimes}}次
								</view>
							</view>
							<view class="rightBtn">
								<view class="remainNum">
									剩余：{{item.syNum}}
								</view>
								<view class="btn">
									<view class="lookBtn" @click="lookAt(item)">
										查看
									</view>
									<view class="exchangeBtn" @click="exchange(item)">
										兑换
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</template>
	</gzPageWrapper>
	<uni-popup ref="popup" type="center" :mask-click="false" border-radius="10px 10px 0 0">
		<view class="dialog">
			<view class="topBg">
				<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/064eb50d-8901-495d-b238-7697967f1b23.png" mode="aspectFill"></image>
				<view class="title">温馨提示</view>
			</view>
			
			<view class="con">
				<view class="text">您暂未完成实名认证，无法享受客户权益，请前往认证页面完成实名认证。</view>
			</view>
			<view class="btn">
				<!-- <view class="cancel" @click="cancel">取消</view> -->
				<view class="confirm" @click="confirm">确认</view>
			</view>
		</view>
	</uni-popup>
	
	<uni-popup ref="popupVirtualCard" type="center" :mask-click="true" border-radius="10px 10px 0 0">
		<view class="dialog1">
			<view class="title">兑换</view>
			<view class="con">
				<view class="text">是否确认兑换？</view>
				<!-- <view class="cdkText">
					{{textContent}}
				</view> -->
				<!-- <input type="text" class="uni-input" v-model="account"  placeholder="请输入正确的充值账号" /> -->
			</view>
			<view class="btn">
				<view class="cancel" @click="cancelVirtualCard">取消</view>
				<view class="confirm" @click="confirmVirtualCard(textContent)">确认</view>
			</view>
			<view class="close" @click="closeVirtualCard">
				<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b81785e4-6323-4934-9dec-9403c6815dea.png" mode="aspectFill"></image>
			</view>
		</view>
	</uni-popup>
	<!-- 授权登录弹窗 -->
	<gzLoginPopup ref="gzLoginPopupRef" v-model:value="vdata.fansInfo" v-model:isLogin="vdata.isLogin"></gzLoginPopup>
	
</template>

<script setup>
	import {ref,reactive,computed,nextTick,watch,watchEffect} from 'vue'
	import { onShow, onLoad, onPageScroll, onHide } from '@dcloudio/uni-app';
	import storageManage from '@/util/storageManage.js'
	import { $fansDetail,$scoreExchangeEquityMallList,$scoreCoupon,$equitySelectEquityName,$scoreRecordExchange } from '@/http/apiManager.js';
	
	const popup = ref();
	const popupVirtualCard = ref()
	const dialogIsAuth = ref('')
	const gzLoginPopupRef = ref()
	const isAuth = ref()
	const vdata = reactive({
		tabItems: [],
		tabCurrent: 0,	// 当前下标
		fansInfo: {}, // 用户数据
		isLogin: false,	// 用户的登录状态
		// 扫码领券相关数据
		activityId: '',	// 活动id
		couponList: [],	// 卡券列表
		dynamicImageUrl:'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/152a4b28-0b34-4336-8f6d-702fbd7ae315.png',
		bgColor:'',
		textColor:'#367F99',//字体样式
		memberName:'',
		memberVip:'',
		memberTime:'',
		memberScore:'',
		lRecord:'',
		eDetail:'',
		eRule:'',
		rightColor:'',
		crownBg:'',//皇冠背景图
		equityList:[],
		totalScore:'',//我的福分
		agentEquityId:'',
		exchangeItem:{},//点击兑换的参数
	});
	const activeBgPic = computed(()=>{
		return {
			background: `#F7F8FB url(${vdata.dynamicImageUrl}) no-repeat 0 0 / 100% 800rpx`,
		}
	})
	
	
	// 定义等级类名数组	// ''(未实名)，价值，金桂，富嘉，钻石，鼎福
	const assetLevelArr = ['','jz','jg','fj','zs','df']
	// 根据详情中返回的用户会员等级 计算属性 顶部会员卡片的类名 动态调整样式
	const assetLevelClass = computed(() => {
		const { isAuth, quarterAssetLevel, quarterInSearch } = vdata.fansInfo
		if(isAuth ==0 && vdata.isLogin){
			if(quarterInSearch==0){
				if(assetLevelArr[quarterAssetLevel] === void 0){	// 如果assetLevel返回的不是0-5则说明是非实名用户	此时使用默认的样式即可
					return ''
				}
				return assetLevelArr[quarterAssetLevel]
			}else{
				return assetLevelArr[1]
			}
		}else{
			return assetLevelArr[0]
			
		}
	})
	
	onLoad(async()=>{
		// 获取总福分
		const { bizData:fansProperty } = await $scoreCoupon()
		vdata.totalScore = fansProperty.score
		// 获取分类栏目
		$equitySelectEquityName({
			pid:1,
			agentNo:storageManage.agentInfo().agentNo
		}).then(res=>{
			vdata.tabItems = [{content:'全部权益',agentEquityId:''},...res.bizData]
		})
		// if(isAuth !=0){
		// 	nextTick(() => {
		// 		popup.value.open()
		// 	})
		// }else{
		// 	nextTick(() => {
		// 		popup.value.close()
		// 	})
		// }
	})
	
	onShow(async ()=>{
		const { bizData:fansInfo } = await $fansDetail()
		vdata.fansInfo = fansInfo
		storageManage.userInfo(fansInfo)
		vdata.isLogin = storageManage.isLogin()
		// if(!vdata.isLogin){
		// 	uni.showModal({
		// 			content: '您还未登录,请先登录！',
		// 			success: function(res) {
		// 			if (res.confirm) {
		// 			    // 执行确认后的操作
		// 				gzLoginPopupRef.value.open()
		// 			} 
		// 			else {
		// 				// 执行取消后的操作
		// 			}
		// 		}
		// 	})
		// }
		
		

		const {isAuth} = vdata.fansInfo
		$scoreExchangeEquityMallList({agentEquityId:vdata.agentEquityId}).then(res=>{
						vdata.equityList = res.bizData.records
					})
		// 获取分类栏目
		$equitySelectEquityName({
			pid:1,
			agentNo:storageManage.agentInfo().agentNo
		}).then(res=>{
			
		})
		// vdata.isLogin = storageManage.isLogin()
		if(!vdata.isLogin){
			await getFansDetail()
		}
		// if(isAuth !=0){
		// 	nextTick(() => {
		// 		popup.value.open()
		// 	})
		// }else{
		// 	nextTick(() => {
		// 		popup.value.close()
		// 	})
		// }
			
			if(assetLevelClass.value==''){
				
				vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b441b1b9-7eca-4835-b25a-47fae4806948.png'
				vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/fdc142e6-7f39-4899-aaf1-fe584cf4c5ec.png'
				vdata.bgColor = '#367F99'
				vdata.textColor = '#367F99'
				
				vdata.memberName = '#367F99'
				vdata.memberVip = 'linear-gradient(90deg, #70B4CC 0%, #367F99 100%)'
				vdata.memberTime = '#367F99'
				vdata.memberScore = '#367F99'
				vdata.lRecord = 'linear-gradient(90deg, #70B4CC 0%, #367F99 100%)'
				vdata.eDetail = 'linear-gradient(90deg, #70B4CC 0%, #367F99 100%)'
				vdata.eRule = 'linear-gradient(90deg, #70B4CC 0%, #367F99 100%)'
			}else if(assetLevelClass.value=='jz'){
				
				vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f9efad2d-a602-445a-8322-4b2a7e34f2bb.png'
				vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/6c73349c-d8a5-44e6-a3c1-b25316b5cb0a.png'
				vdata.bgColor = '#A25B21'
				vdata.textColor = '#A25B21'
				vdata.memberName = '#A25B21'
				vdata.memberVip = 'linear-gradient(90deg, #D4782A 0%, #A15B20 100%)'
				vdata.memberTime = '#A25B21'
				vdata.memberScore = '#A25B21'
				vdata.lRecord = 'linear-gradient(90deg, #D4782A 0%, #A15B20 100%)'
				vdata.eDetail = 'linear-gradient(90deg, #D4782A 0%, #A15B20 100%)'
				vdata.eRule = 'linear-gradient(90deg, #D4782A 0%, #A15B20 100%)'
			}else if(assetLevelClass.value =='jg'){
				vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/2bd5669e-e98d-4d01-b11e-372b9fada33d.png'
				vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f1e3eaa0-5bf7-43dc-acf5-5166615308e5.png'
				vdata.bgColor = '#CB762D'
				vdata.textColor = '#CB762D'
				vdata.memberName = '#CB762D'
				vdata.memberVip = 'linear-gradient(90deg, #DB9F38 0%, #CA752D 100%)'
				vdata.memberTime = '#CB762D'
				vdata.memberScore = '#CB762D'
				vdata.lRecord = 'linear-gradient(90deg, #DB9F38 0%, #CA752D 100%)'
				vdata.eDetail = 'linear-gradient(90deg, #DB9F38 0%, #CA752D 100%)'
				vdata.eRule = 'linear-gradient(90deg, #DB9F38 0%, #CA752D 100%)'
			}else if(assetLevelClass.value =='fj'){
				vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/e14d7250-e243-4afb-86fe-bcec4850f05e.png'
				vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a23c841b-658e-46ae-9e18-122af3fe1424.png'
				vdata.bgColor = '#2E54E2'
				vdata.textColor = '#2E54E2'
				vdata.memberName = '#2E54E2'
				vdata.memberVip = 'linear-gradient(90deg, #7390FF 0%, #2D52E1 100%)'
				vdata.memberTime = '#2E54E2'
				vdata.memberScore = '#2E54E2'
				vdata.lRecord = 'linear-gradient(90deg, #7390FF 0%, #2D52E1 100%)'
				vdata.eDetail = 'linear-gradient(90deg, #7390FF 0%, #2D52E1 100%)'
				vdata.eRule = 'linear-gradient(90deg, #7390FF 0%, #2D52E1 100%)'
			}else if(assetLevelClass.value =='zs'){
				vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/7edebe36-3895-436c-9559-796f00d1369d.png'
				vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/345433c1-4d80-41af-9d00-89ba216d0539.png'
				vdata.bgColor = '#4E3AF1'
				vdata.textColor = '#4E3AF1'
				vdata.memberName = '#4E3AF1'
				vdata.memberVip = 'linear-gradient(90deg, #A480FF 0%, #5E4BF0 100%)'
				vdata.memberTime = '#4E3AF1'
				vdata.memberScore = '#4E3AF1'
				vdata.lRecord = 'linear-gradient(90deg, #A480FF 0%, #5E4BF0 100%)'
				vdata.eDetail = 'linear-gradient(90deg, #A480FF 0%, #5E4BF0 100%)'
				vdata.eRule = 'linear-gradient(90deg, #A480FF 0%, #5E4BF0 100%)'
			}else if(assetLevelClass.value =='df'){
				vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/3de9d0ad-04bf-4997-99d7-8214ace5dab7.png'
				vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/2d8ef72e-54c6-4cd7-999d-871062cf0fd9.png'
				vdata.bgColor = '#FFFFFF'
				vdata.textColor = '#FFFFFF'
				vdata.memberName = '#FFFFFF'
				vdata.memberVip = 'linear-gradient(90deg, #FAFAFA 0%, #9B9B9B 50%, #FAFAFA 100%)'
				vdata.memberTime = '#FFFFFF'
				vdata.memberScore = '#FFFFFF'
				vdata.lRecord = 'linear-gradient(90deg, #FAFAFA 0%, #9B9B9B 50%, #FAFAFA 100%)'
				vdata.eDetail = 'linear-gradient(90deg, #FAFAFA 0%, #9B9B9B 50%, #FAFAFA 100%)'
				vdata.eRule = 'linear-gradient(90deg, #FAFAFA 0%, #9B9B9B 50%, #FAFAFA 100%)'
				vdata.rightColor = '#000'
			}
	})
	
	
	/**
	 * 下拉刷新
	 */
	const upCallback = async (mescroll) => {
		
		const { bizData:fansInfo } = await $fansDetail()
		vdata.fansInfo = fansInfo
		storageManage.userInfo(fansInfo)
		vdata.isLogin = storageManage.isLogin()
		// if(!vdata.isLogin){
		// 	uni.showModal({
		// 			content: '您还未登录,请先登录！',
		// 			success: function(res) {
		// 			if (res.confirm) {
		// 			    // 执行确认后的操作
		// 				gzLoginPopupRef.value.open()
		// 			} 
		// 			else {
		// 				// 执行取消后的操作
		// 			}
		// 		}
		// 	})
			
		// }
		const {isAuth} = vdata.fansInfo
		
		const { num, size } = mescroll
		const pageNumber = num ? num : 1
		const pageSize = size ? size : 10
		if(pageNumber>1){
			$scoreExchangeEquityMallList({agentEquityId:vdata.agentEquityId , pageNumber, pageSize, }).then(({ bizData }) => {
				if(pageNumber == 1) vdata.equityList = []
				vdata.equityList = vdata.equityList.concat(bizData.records)
				mescroll.endSuccess(bizData.records.length,bizData.hasNext)
			}).catch(() => {
				mescroll.endErr()
			})
		}else{
			$scoreExchangeEquityMallList({agentEquityId:vdata.agentEquityId}).then(res=>{
				vdata.equityList = res.bizData.records
			})
			// // 获取总福分
					const { bizData:fansProperty } = await $scoreCoupon()
					vdata.totalScore = fansProperty.score
					
					
					// 获取分类栏目
					$equitySelectEquityName({
						pid:1,
						agentNo:storageManage.agentInfo().agentNo
					}).then(res=>{
						
						vdata.tabItems = [{content:'全部权益',agentEquityId:''},...res.bizData]
					})
					
					// 刷新用户详情
					try{
						if(assetLevelClass.value==''){
							vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b441b1b9-7eca-4835-b25a-47fae4806948.png'
							vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/fdc142e6-7f39-4899-aaf1-fe584cf4c5ec.png'
							vdata.bgColor = '#367F99'
							vdata.textColor = '#367F99'
							
							vdata.memberName = '#367F99'
							vdata.memberVip = 'linear-gradient(90deg, #70B4CC 0%, #367F99 100%)'
							vdata.memberTime = '#367F99'
							vdata.memberScore = '#367F99'
							vdata.lRecord = 'linear-gradient(90deg, #70B4CC 0%, #367F99 100%)'
							vdata.eDetail = 'linear-gradient(90deg, #70B4CC 0%, #367F99 100%)'
							vdata.eRule = 'linear-gradient(90deg, #70B4CC 0%, #367F99 100%)'
						}else if(assetLevelClass.value=='jz'){
							vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f9efad2d-a602-445a-8322-4b2a7e34f2bb.png'
							vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/6c73349c-d8a5-44e6-a3c1-b25316b5cb0a.png'
							vdata.bgColor = '#A25B21'
							vdata.textColor = '#A25B21'
							vdata.memberName = '#A25B21'
							vdata.memberVip = 'linear-gradient(90deg, #D4782A 0%, #A15B20 100%)'
							vdata.memberTime = '#A25B21'
							vdata.memberScore = '#A25B21'
							vdata.lRecord = 'linear-gradient(90deg, #D4782A 0%, #A15B20 100%)'
							vdata.eDetail = 'linear-gradient(90deg, #D4782A 0%, #A15B20 100%)'
							vdata.eRule = 'linear-gradient(90deg, #D4782A 0%, #A15B20 100%)'
						}else if(assetLevelClass.value =='jg'){
							vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/2bd5669e-e98d-4d01-b11e-372b9fada33d.png'
							vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f1e3eaa0-5bf7-43dc-acf5-5166615308e5.png'
							vdata.bgColor = '#CB762D'
							vdata.textColor = '#CB762D'
							vdata.memberName = '#CB762D'
							vdata.memberVip = 'linear-gradient(90deg, #DB9F38 0%, #CA752D 100%)'
							vdata.memberTime = '#CB762D'
							vdata.memberScore = '#CB762D'
							vdata.lRecord = 'linear-gradient(90deg, #DB9F38 0%, #CA752D 100%)'
							vdata.eDetail = 'linear-gradient(90deg, #DB9F38 0%, #CA752D 100%)'
							vdata.eRule = 'linear-gradient(90deg, #DB9F38 0%, #CA752D 100%)'
						}else if(assetLevelClass.value =='fj'){
							vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/e14d7250-e243-4afb-86fe-bcec4850f05e.png'
							vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a23c841b-658e-46ae-9e18-122af3fe1424.png'
							vdata.bgColor = '#2E54E2'
							vdata.textColor = '#2E54E2'
							vdata.memberName = '#2E54E2'
							vdata.memberVip = 'linear-gradient(90deg, #7390FF 0%, #2D52E1 100%)'
							vdata.memberTime = '#2E54E2'
							vdata.memberScore = '#2E54E2'
							vdata.lRecord = 'linear-gradient(90deg, #7390FF 0%, #2D52E1 100%)'
							vdata.eDetail = 'linear-gradient(90deg, #7390FF 0%, #2D52E1 100%)'
							vdata.eRule = 'linear-gradient(90deg, #7390FF 0%, #2D52E1 100%)'
						}else if(assetLevelClass.value =='zs'){
							vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/7edebe36-3895-436c-9559-796f00d1369d.png'
							vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/345433c1-4d80-41af-9d00-89ba216d0539.png'
							vdata.bgColor = '#4E3AF1'
							vdata.textColor = '#4E3AF1'
							vdata.memberName = '#4E3AF1'
							vdata.memberVip = 'linear-gradient(90deg, #A480FF 0%, #5E4BF0 100%)'
							vdata.memberTime = '#4E3AF1'
							vdata.memberScore = '#4E3AF1'
							vdata.lRecord = 'linear-gradient(90deg, #A480FF 0%, #5E4BF0 100%)'
							vdata.eDetail = 'linear-gradient(90deg, #A480FF 0%, #5E4BF0 100%)'
							vdata.eRule = 'linear-gradient(90deg, #A480FF 0%, #5E4BF0 100%)'
						}else if(assetLevelClass.value =='df'){
							vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/3de9d0ad-04bf-4997-99d7-8214ace5dab7.png'
							vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/2d8ef72e-54c6-4cd7-999d-871062cf0fd9.png'
							vdata.bgColor = '#FFFFFF'
							vdata.textColor = '#FFFFFF'
							vdata.memberName = '#FFFFFF'
							vdata.memberVip = 'linear-gradient(90deg, #FAFAFA 0%, #9B9B9B 50%, #FAFAFA 100%)'
							vdata.memberTime = '#FFFFFF'
							vdata.memberScore = '#FFFFFF'
							vdata.lRecord = 'linear-gradient(90deg, #FAFAFA 0%, #9B9B9B 50%, #FAFAFA 100%)'
							vdata.eDetail = 'linear-gradient(90deg, #FAFAFA 0%, #9B9B9B 50%, #FAFAFA 100%)'
							vdata.eRule = 'linear-gradient(90deg, #FAFAFA 0%, #9B9B9B 50%, #FAFAFA 100%)'
							vdata.rightColor = '#000'
						}
						mescroll.endSuccess(0)
					}catch(e){
						mescroll.endErr()
						//TODO handle the exception
					}
		}
		
	}
	
	
	
	

	
	// 没有登录走这里

	

	
	const items = computed(() => {
		return vdata.tabItems.map(item=>item.content)
	})
	
	// 获取用户详情
	async function getFansDetail() {
		if(storageManage.userInfo()){
			vdata.fansInfo = storageManage.userInfo()
			dialogIsAuth.value =vdata.fansInfo.isAuth
			
		}else{
			const { bizData:fansInfo } = await $fansDetail()
			vdata.fansInfo = fansInfo
			dialogIsAuth.value =vdata.fansInfo.isAuth
			
			storageManage.userInfo(fansInfo)
		}
	}
	

	
	
	watchEffect(()=>{
		if(assetLevelClass.value==''){
			vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b441b1b9-7eca-4835-b25a-47fae4806948.png'
			vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/fdc142e6-7f39-4899-aaf1-fe584cf4c5ec.png'
			vdata.bgColor = '#367F99'
			vdata.textColor = '#367F99'
			
			vdata.memberName = '#367F99'
			vdata.memberVip = 'linear-gradient(90deg, #70B4CC 0%, #367F99 100%)'
			vdata.memberTime = '#367F99'
			vdata.memberScore = '#367F99'
			vdata.lRecord = 'linear-gradient(90deg, #70B4CC 0%, #367F99 100%)'
			vdata.eDetail = 'linear-gradient(90deg, #70B4CC 0%, #367F99 100%)'
			vdata.eRule = 'linear-gradient(90deg, #70B4CC 0%, #367F99 100%)'
		}else if(assetLevelClass.value=='jz'){
			
			vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f9efad2d-a602-445a-8322-4b2a7e34f2bb.png'
			vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/6c73349c-d8a5-44e6-a3c1-b25316b5cb0a.png'
			vdata.bgColor = '#A25B21'
			vdata.textColor = '#A25B21'
			vdata.memberName = '#A25B21'
			vdata.memberVip = 'linear-gradient(90deg, #D4782A 0%, #A15B20 100%)'
			vdata.memberTime = '#A25B21'
			vdata.memberScore = '#A25B21'
			vdata.lRecord = 'linear-gradient(90deg, #D4782A 0%, #A15B20 100%)'
			vdata.eDetail = 'linear-gradient(90deg, #D4782A 0%, #A15B20 100%)'
			vdata.eRule = 'linear-gradient(90deg, #D4782A 0%, #A15B20 100%)'
		}else if(assetLevelClass.value =='jg'){
			vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/2bd5669e-e98d-4d01-b11e-372b9fada33d.png'
			vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f1e3eaa0-5bf7-43dc-acf5-5166615308e5.png'
			vdata.bgColor = '#CB762D'
			vdata.textColor = '#CB762D'
			vdata.memberName = '#CB762D'
			vdata.memberVip = 'linear-gradient(90deg, #DB9F38 0%, #CA752D 100%)'
			vdata.memberTime = '#CB762D'
			vdata.memberScore = '#CB762D'
			vdata.lRecord = 'linear-gradient(90deg, #DB9F38 0%, #CA752D 100%)'
			vdata.eDetail = 'linear-gradient(90deg, #DB9F38 0%, #CA752D 100%)'
			vdata.eRule = 'linear-gradient(90deg, #DB9F38 0%, #CA752D 100%)'
		}else if(assetLevelClass.value =='fj'){
			vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/e14d7250-e243-4afb-86fe-bcec4850f05e.png'
			vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a23c841b-658e-46ae-9e18-122af3fe1424.png'
			vdata.bgColor = '#2E54E2'
			vdata.textColor = '#2E54E2'
			vdata.memberName = '#2E54E2'
			vdata.memberVip = 'linear-gradient(90deg, #7390FF 0%, #2D52E1 100%)'
			vdata.memberTime = '#2E54E2'
			vdata.memberScore = '#2E54E2'
			vdata.lRecord = 'linear-gradient(90deg, #7390FF 0%, #2D52E1 100%)'
			vdata.eDetail = 'linear-gradient(90deg, #7390FF 0%, #2D52E1 100%)'
			vdata.eRule = 'linear-gradient(90deg, #7390FF 0%, #2D52E1 100%)'
		}else if(assetLevelClass.value =='zs'){
			vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/7edebe36-3895-436c-9559-796f00d1369d.png'
			vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/345433c1-4d80-41af-9d00-89ba216d0539.png'
			vdata.bgColor = '#4E3AF1'
			vdata.textColor = '#4E3AF1'
			vdata.memberName = '#4E3AF1'
			vdata.memberVip = 'linear-gradient(90deg, #A480FF 0%, #5E4BF0 100%)'
			vdata.memberTime = '#4E3AF1'
			vdata.memberScore = '#4E3AF1'
			vdata.lRecord = 'linear-gradient(90deg, #A480FF 0%, #5E4BF0 100%)'
			vdata.eDetail = 'linear-gradient(90deg, #A480FF 0%, #5E4BF0 100%)'
			vdata.eRule = 'linear-gradient(90deg, #A480FF 0%, #5E4BF0 100%)'
		}else if(assetLevelClass.value =='df'){
			vdata.dynamicImageUrl = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/3de9d0ad-04bf-4997-99d7-8214ace5dab7.png'
			vdata.crownBg = 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/2d8ef72e-54c6-4cd7-999d-871062cf0fd9.png'
			vdata.bgColor = '#FFFFFF'
			vdata.textColor = '#FFFFFF'
			vdata.memberName = '#FFFFFF'
			vdata.memberVip = 'linear-gradient(90deg, #FAFAFA 0%, #9B9B9B 50%, #FAFAFA 100%)'
			vdata.memberTime = '#FFFFFF'
			vdata.memberScore = '#FFFFFF'
			vdata.lRecord = 'linear-gradient(90deg, #FAFAFA 0%, #9B9B9B 50%, #FAFAFA 100%)'
			vdata.eDetail = 'linear-gradient(90deg, #FAFAFA 0%, #9B9B9B 50%, #FAFAFA 100%)'
			vdata.eRule = 'linear-gradient(90deg, #FAFAFA 0%, #9B9B9B 50%, #FAFAFA 100%)'
			vdata.rightColor = '#000'
		}
	})
	// 取消
	const cancel = () =>{
		
	}
	// 确认
	const confirm = () =>{
		uni.switchTab({
			url:'/pages/pageBlessingPoints/pageBlessingPoints'
		})
	}
	// 等级记录
	const levelRecord = () =>{
		uni.navigateTo({
			url:'/pages/pageEquityCenter/levelRecord/index'
		})
	}
	// 权益明细
	const equityDetail = () =>{
		uni.showToast({
			title: '该功能暂未开放',
			icon: 'none',
			duration: 1000
		})
	}
	// 权益规则
	const equityRule = () =>{
		uni.showToast({
			title: '该功能暂未开放',
			icon: 'none',
			duration: 1000
		})
	}
	// tab切换
	const changeTab = (tab,index) => {
	  vdata.tabCurrent = index;
	  vdata.agentEquityId = tab.agentEquityId
	  $scoreExchangeEquityMallList({agentEquityId:tab.agentEquityId}).then(res=>{
	  				vdata.equityList = res.bizData.records
	  			})
	}
	// 取消兑换
	const cancelVirtualCard = () =>{
		popupVirtualCard.value.close()
	}
	// 确认兑换
	const  confirmVirtualCard = () =>{
		$scoreRecordExchange({
			scoreExchangeId:vdata.exchangeItem.scoreExchangeId,
			infoType:vdata.exchangeItem.awardType,
			name:vdata.exchangeItem.name,
			state:1
		}).then(res=>{
			if(res.code ==0){
				uni.showToast({
					title: '兑换成功',
					icon: 'none',
					duration: 1000
				})  
			}
			$scoreExchangeEquityMallList({agentEquityId:vdata.agentEquityId}).then(res=>{
				vdata.equityList = res.bizData.records
			})	
			// // 获取总福分
			$scoreCoupon().then(res=>{
				vdata.totalScore = res.bizData.score
			})
		})
		popupVirtualCard.value.close()
	}
	// 关闭弹窗
	const closeVirtualCard = () =>{
		popupVirtualCard.value.close()
	}
	// 查看
	const lookAt = (item) =>{
		if(item.awardType ==0){
			// 卡券
			uni.navigateTo({
				url: `/pages/pageEquityCenter/couponDetail?couponId=${item.awardId}&scoreNeed=${item.scoreNeed}&detailType=0&detailData=${encodeURIComponent(JSON.stringify(item))}`
			});
		}else if(item.awardType ==1){
			// 实物
			uni.navigateTo({
				url: `/pages/pageEquityCenter/awardDetail?goodsId=${item.awardId}&scoreNeed=${item.scoreNeed}&detailType=0&detailData=${encodeURIComponent(JSON.stringify(item))}`
			});
		}else if (item.awardType==2){
			// 虚拟券
			if(item.goodsType ==0){
				// 0 CDK
				uni.navigateTo({
					url:`/pages/pageEquityCenter/CDKdetail?detailData=${encodeURIComponent(JSON.stringify(item))}&detailType=look`
				})
			}else if(item.goodsType ==1){
				// 1 直充
				uni.navigateTo({
					url:`/pages/pageEquityCenter/directCardDetail?detailData=${encodeURIComponent(JSON.stringify(item))}&detailType=look`
				})
			}
		}
	}
	
	onHide(() => {
		popup.value.close()
	})
	
	// 兑换
	const exchange = (item) =>{
		// 校验登录 以及实名
		if(!vdata.isLogin){
			gzLoginPopupRef.value.open()
			return
		}
		// 校验实名
		if(vdata.fansInfo.isAuth !=0){
			nextTick(() => {
				popup.value.open()
			})
			return
		}
			if(item.awardType ==0){
				popupVirtualCard.value.open()
				vdata.exchangeItem = item
			}else if(item.awardType ==1){
				popupVirtualCard.value.open()
				vdata.exchangeItem = item
			}else if (item.awardType==2){
				// 虚拟券
				if(item.goodsType ==0){
					// 0 CDK
					popupVirtualCard.value.open()
					vdata.exchangeItem = item
				}else if(item.goodsType ==1){
					// 1 直充
					popupVirtualCard.value.open()
					vdata.exchangeItem = item
				}
		}
	}

</script>

<style lang="less" scoped>
	// 定义所有卡片字体颜色变量
	@default-color: #367F99 ;	// 默认字体颜色
	@jz-color: #A25B21;	// 价值字体颜色
	@jg-color: #CB762D;	// 金桂字体颜色
	@fj-color: #2E54E2;	// 富嘉字体颜色
	@zs-color: #4E3AF1;	// 钻石字体颜色
	@df-color: #FFFFFF;	// 鼎福字体颜色
	
	
	// 背景图片
	@default-auth-pic-bg: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/cd59d4e4-a0d4-42ba-a294-74b0656aa699.png';	// 默认图片背景
	@jz-auth-pic-bg: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/30c0d16c-4faa-483c-b7c7-98ea780527d1.png';	// 价值图片背景
	@jg-auth-pic-bg: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/8b72b14c-4943-4791-aa11-2773a5ccee9e.png';	// 金桂图片背景
	@fj-auth-pic-bg: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/e168d14b-d441-4c5a-a5d4-b1d024f9a8d4.png';	// 富嘉图片背景
	@zs-auth-pic-bg: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/20c5a0cd-acb5-4e8b-9f36-d914b3450287.png';	// 钻石图片背景
	@df-auth-pic-bg: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/3d35f709-8ba3-4920-92fa-38ba640d6574.png';	// 鼎福图片背景
	
	// 实名标签 渐变背景
	@default-auth-gradient-bg: linear-gradient(90deg, #70B4CC 0%, #367F99 100%);	// 默认渐变背景
	@jz-auth-gradient-bg: linear-gradient(90deg, #D4782A 0%, #A15B20 100%);	// 价值渐变背景
	@jg-auth-gradient-bg: linear-gradient(90deg, #DB9F38 0%, #CA752D 100%);	// 金桂渐变背景
	@fj-auth-gradient-bg: linear-gradient(90deg, #7390FF 0%, #2D52E1 100%);	// 富嘉渐变背景
	@zs-auth-gradient-bg: linear-gradient(90deg, #A480FF 0%, #5E4BF0 100%);	// 钻石渐变背景
	@df-auth-gradient-bg: linear-gradient(90deg, #FAFAFA 0%, #9B9B9B 50%, #FAFAFA 100%);	// 鼎福渐变背景
		::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		}
.dialog1{
		width: 620rpx;
		height: 400rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 42rpx 40rpx 60rpx 40rpx;
		box-sizing: border-box;
		position: relative;
		.close{
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			top: 24rpx;
			right: 42rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.title{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			line-height: 32rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		.con{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 60rpx;
			.text{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-right: 12rpx;
			}
			.uni-input{
				border: 1px solid #DDDDDD !important;
				border-radius: 8rpx;
				height: 64rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
			}
		}
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 60rpx;
			.cancel{
				width: 144rpx;
				height: 64rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx solid #24C789;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #24C789;
				line-height: 64rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin-right: 60rpx;
			}
			.confirm{
				width: 144rpx;
				height: 64rpx;
				background: #24C789;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}
	.dialog{
		width: 620rpx;
		height: 532rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		// padding: 42rpx 40rpx 60rpx 40rpx;
		// box-sizing: border-box;
		
		.topBg{
			position: relative;
			width: 620rpx;
			height: 166rpx;
			border-radius: 24rpx 24rpx 0 0;
			image{
				width: 100%;
				height: 100%;
			}
			.title{
				position: absolute;
				top: 88rpx;
				left: 214rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 48rpx;
				color: #FF840B;
				line-height: 56rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}

		.con{
			display: flex;
			align-items: center;
			padding: 50rpx 40rpx 60rpx 40rpx;
			box-sizing: border-box;
			// margin-top: 60rpx;
			.text{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
				line-height: 38rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				text-indent: 2em;
			}
		}
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			// margin-top: 60rpx;
			.cancel{
				width: 144rpx;
				height: 64rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx solid #24C789;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #24C789;
				line-height: 64rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin-right: 60rpx;
			}
			.confirm{
				width: 144rpx;
				height: 64rpx;
				background: #24C789;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}
	.inner {
		position: relative;
		.crown{
			width: 420rpx;
			height: 450rpx;
			position: absolute;
			top: -128rpx;
			right: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.rightB{
			display: flex;
			flex-direction: column;
			position: absolute;
			top: 0;
			right: 0;
			.levelRecord{
				
				width: 130rpx;
				height: 48rpx;
				background: linear-gradient( 90deg, #70B4CC 0%, #367F99 100%);
				border-radius: 24rpx 0rpx 0rpx 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			.equityDetail{
				width: 130rpx;
				height: 48rpx;
				background: linear-gradient( 90deg, #70B4CC 0%, #367F99 100%);
				border-radius: 24rpx 0rpx 0rpx 24rpx;
				border-radius: 24rpx 0rpx 0rpx 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin: 40rpx 0;
			}
			.equityRule{
				width: 130rpx;
				height: 48rpx;
				background: linear-gradient( 90deg, #70B4CC 0%, #367F99 100%);
				border-radius: 24rpx 0rpx 0rpx 24rpx;
				border-radius: 24rpx 0rpx 0rpx 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
		.topName {
			display: flex;
			align-items: center;

			margin-top: 40rpx;
			.left {
				color: #367F99;
				// width: 276rpx;
				height: 60rpx;
				font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
				font-weight: 400;
				font-size: 60rpx;
				line-height: 60rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-right: 8rpx;
				// background: linear-gradient(0deg, #70B4CC 0%, #367F99 100%);
			}

			.right {
				width: 64rpx;
				height: 36rpx;
				background: linear-gradient(90deg, #70B4CC 0%, #367F99 100%);
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 24rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

		}

		.center {
			margin-top: 20rpx;
			// width: 178rpx;
			height: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #367F99;
			line-height: 24rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.bottom {
			display: flex;
			margin-top: 40rpx;

			.text {
				// width: 158rpx;
				height: 60rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #367F99;
				line-height: 52rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.num {
				// width: 158rpx;
				height: 60rpx;
				margin-left: 10rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 64rpx;
				color: #367F99;
				line-height: 39rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}


		}
	}
	
	.content{
		margin-top: 50rpx;
		padding: 24rpx 32rpx 0 32rpx;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		min-height: 500rpx;
		background: #F5F6FA !important;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
.tabContainer{
			width: 686rpx;
			height: 60rpx;
			// overflow-x: auto;
			background-color: #F5F6FA;
			.tab-container {
				// padding: 0 24rpx;
				box-sizing: border-box;
			  display: flex;
			  align-items: center;
			  width: 100%;
			  height: 60rpx;
			  background-color: #F5F6FA;
			  .item{
				  width: 100%;
			  }
			}
			
			.tab-item {
			  width: 100%;
			  cursor: pointer;
			  margin-right: 20px;
			  position: relative;
			  font-family: PingFang SC, PingFang SC;
			  font-weight: 500;
			  font-size: 30rpx;
			  color: #999999;
			  line-height: 30rpx;
			  text-align: left;
			  font-style: normal;
			  text-transform: none;
			  white-space: nowrap;
			}
			
			.underline {
			  position: absolute;
			  bottom: -10rpx;
			  left: 50%;
			  // width: 50%; /* 下划线宽度比文字宽度短 */
			  height: 2px;
			  width: 30%;
			  height: 0rpx;
			  border: 1rpx solid #24C789;
			  transform: translateX(-50%);
			}
			
			.selected {
			 font-family: PingFang SC, PingFang SC;
			 font-weight: 500;
			 // font-size: 32rpx;
			 color: #000000;
			 line-height: 32rpx;
			 text-align: center;
			 font-style: normal;
			 text-transform: none;
			  
			}
			
			.content-container {
			  margin-top: 20px;
			}
		}
		.list{
			width: 100%;
			height: 100%;
			// padding-top: 42rpx;
			// padding: 42rpx 32rpx;
			box-sizing: border-box;
			.item{
				margin-top: 24rpx;
				display: flex;
				width: 686rpx;
				height: 220rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				.img{
					width: 220rpx;
					height: 220rpx;
					border-radius: 16rpx 0rpx 0rpx 16rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 16rpx 0rpx 0rpx 16rpx;
					}
				}
				.rightCon{
					display: flex;
					flex: 1;
					.leftText{
						padding: 40rpx 20rpx;
						box-sizing: border-box;
						.topText{
							width: 272rpx;
							
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #000000;
							line-height: 32rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-top: 15rpx;
						}
						.expendScore{
							// font-family: PingFang SC, PingFang SC;
							// font-weight: 400;
							// font-size: 30rpx;
							// color: #FF8833;
							// line-height: 24rpx;
							// text-align: left;
							// font-style: normal;
							// text-transform: none;
							
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #FF8833;
							line-height: 24rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							
							margin: 32rpx 0;
						}
						.exchangeNum{
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 24rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							font-family: PingFang SC, PingFang SC;

						}
					}
					
					.rightBtn{
						flex: 1;
						position: relative;
						.remainNum{
							position: absolute;
							top: 0;
							right: 0;
							width: 160rpx;
							height: 60rpx;
							background: #E9F9F3;
							border-radius: 0rpx 16rpx 0rpx 24rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #24C789;
							line-height: 60rpx;
							text-align: center;
							font-style: normal;
							text-transform: none;
							
						}
						.btn{
							display: flex;
							position: absolute;
							bottom: 20rpx;
							right: 20rpx;
							.lookBtn{
								width: 100rpx;
								height: 52rpx;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								border: 2rpx solid #FF8833;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #FF8833;
								line-height: 56rpx;
								text-align: center;
								font-style: normal;
								text-transform: none;
								margin-right: 20rpx;
							}
							.exchangeBtn{
								width: 104rpx;
								height: 56rpx;
								background: #FF8833;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #FFFFFF;
								line-height: 56rpx;
								text-align: center;
								font-style: normal;
								text-transform: none;
							}
						}
					}
					
				}
			}
		}
	}
</style>